{% extends "../single_page.html" %}

{% block title %}
<title>样本库信息管理 样本信息</title>
{% endblock %}

{% block header_title %}
<h1>样本信息</h1>
{% endblock %}

{% block header_ol %}
    <li class="breadcrumb-item"><a href="/Home/">Home</a></li>
    <li class="breadcrumb-item">BIS</li>
    <li class="breadcrumb-item active">SampleInfo</li>
{% endblock %}

{% block card-body %}
<table id="table" class="table table-bordered table-hover dt-responsive">
<thead>
<tr>
    <th>索引</th>
    <th>生物样本编号</th>
    <th>华大编号</th>
    <th>原始样本编号</th>
    <th>冰箱位置</th>
    <th>孔板号</th>
    <th>孔位</th>
    <th>样本类型</th>
    <th>采样日期</th>
    <th>寄送日期</th>
    <th>备注</th>
    <th>上次修改时间</th>
    <th>创建时间</th>
    <th>操作</th>
</tr>
</thead>
</table>
{% endblock %}

{% block ModalForm %}
    <div class="form-group">
        <span><a class="text-danger front-weight-bold">* </a>
            <label for="sampler_id"> 华大编号</label></span>
        <input type="text" class="form-control" id="sampler_id" name="sampler_id"
               placeholder="请输入华大编号，必填" required="true">
    </div>
    <div class="form-group">
        <span><a class="text-danger front-weight-bold">* </a>
            <label for="sample_id"> 生物样本编号</label></span>
        <input type="text" class="form-control" id="sample_id" name="sample_id"
               placeholder="请输入生物样本编号，必填" required="true">
    </div>
    <div class="form-group">
        <span><a class="text-danger front-weight-bold">* </a>
            <label for="raw_id"> 原始样本编号</label></span>
        <input type="text" class="form-control" id="raw_id" name="raw_id"
               placeholder="请输入原始样本编号，必填" required="true">
    </div>
    <div class="form-group">
        <label for="fridge"> 冰箱位置</label>
        <input type="text" class="form-control" id="fridge" name="fridge"
               placeholder="请输入冰箱位置，默认：无" value="无">
    </div>
    <div class="form-group">
        <label for="plate"> 孔板号</label>
        <input type="text" class="form-control" id="plate" name="plate"
               placeholder="请输入孔板号，默认：无" value="无">
    </div>
    <div class="form-group">
        <label for="well"> 孔位</label>
        <input type="text" class="form-control" id="well" name="well"
               placeholder="请输入孔位，默认：无" value="无">
    </div>
    <div class="form-group">
        <label for="sample_type"> 样本类型</label>
        <select class="form-control" id="sample_type" name="sample_type">
            <option value="P" selected="selected">血浆</option>
            <option value="L">癌组织</option>
            <option value="S">癌旁组织</option>
            <option value="B">白细胞</option>
            <option value="T">粪便</option>
        </select>
    </div>
    <div class="form-group">
        <label for="sample_date"> 采样日期</label>
        <input type="date" class="form-control" id="sample_date" name="sample_date"
               placeholder="请输入采样日期，默认：2000-01-01" value="2000-01-01">
    </div>
    <div class="form-group">
        <label for="send_date"> 寄送日期</label>
        <input type="date" class="form-control" id="send_date" name="send_date"
               placeholder="请输入寄送日期，默认：2000-01-01" value="2000-01-01">
    </div>
    <div class="form-group">
        <label for="memo"> 备注</label>
        <input type="text" class="form-control" id="memo" name="memo"
               placeholder="请输入备注，默认：无" value="无">
    </div>
{% endblock %}

{% block page-script %}
<script>
  $(document).ready(function () {
      $("#sidebar_BIS>a").addClass("active");
      $("#sidebar_BIS").addClass("menu-open");
      $("#sidebar_BIS>ul>li:eq(1)>a").addClass("active");
      $(".sidebar").removeAttr("hidden");

      let model0 = "SampleInfo";
      let url0 = '/api/BIS/' + model0 + '/';
      let url1 = '/api/BIS/SampleInventoryInfo/';
      let id0 = 0;
      let dataModelForm; //更新弹窗默认值，重置按钮需要

      let data0 = $.ajax({
          url: url0, dataType: 'json', contentType: "application/json",
          type: "get", async: false, data: {fields: "id"}
      }).responseJSON;
      $("#card-title1").text("样本信息 总条目数：" + data0.length);

      function MyModelInit(title_name, data) {
          dataModelForm = data;
          if (title_name === '更新') {
              $('#sampler_id').val(data['sampler_id']);
              $('#sample_id').val(data['sample_id']);
              $('#raw_id').val(data['raw_id']);
              $('#fridge').val(data['fridge']);
              $('#plate').val(data['plate']);
              $('#well').val(data['well']);
              $('#sample_type').val(data['sample_type']);
              $('#sample_date').val(data['sample_date']);
              $('#send_date').val(data['send_date']);
              $('#memo').val(data['memo']);
              $('#type').val('edit');
              $('#modal_title').text('更新');
          } else {
              $('#sampler_id').val("");
              $('#sample_id').val("");
              $('#raw_id').val("");
              $('#type').val('new');
              $('#modal_title').text('新增');
          }
      }

      let table = $('#table').DataTable({
          "paging": true,
          "ordering": true,
          "info": true,
          "autoWidth": false,
          "responsive": true,
          "language": {
              "lengthMenu": "选择每页 _MENU_ 展示 ",
              "zeroRecords": "未找到匹配结果--抱歉",
              "info": "当前显示第 _PAGE_ 页结果，共 _PAGES_ 页",
              "infoEmpty": "没有数据",
              "search": "搜索",
              "infoFiltered": "(获取 _MAX_ 项结果)",
              "paginate": {
                  "first": "首页",
                  "previous": "上一页",
                  "next": "下一页",
                  "last": "末页"
              }
          },
          "scrollY": "500px",
          "scrollCollapse": true,
          "scrollX": true,
          "pagingType": "full_numbers",
          //"fixedColumns": true,
          "rowReorder": true,
          "colReorder": true,
          "searching": true,
          "select": true,
          "fixedHeader": true,
          "lengthChange": true,
          "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "全部"]],
          "serverSide": true,
          "processing": true,
          "deferRender": true,
          "dom": 'rilB<"clear">ftp',
          "buttons": [
              /*
              {
                extend: 'pageLength',
                text: '显示行数'
              },
              */
              {
                  extend: 'colvisGroup',
                  text: '显示前5列',
                  className: 'btn btn-info fas fa-low-vision my-1',
                  show: [0, 1, 2, 3, 4, 5, 13],
                  hide: [6, 7, 8, 9, 10, 11, 12]
              },
              {
                  extend: 'colvisGroup',
                  text: '显示全部列',
                  className: 'btn btn-info far fa-eye my-1',
                  show: ':hidden',
              },
              {
                  extend: 'selectAll',
                  className: 'btn btn-primary fab fa-autoprefixer my-1',
                  text: '全选'
              },
              {
                  extend: 'selectRows',
                  className: 'btn btn-primary far fa-check-circle my-1',
                  text: '选择多行'
              },
              {
                  extend: 'selectNone',
                  className: 'btn btn-primary fas fa-ban my-1',
                  text: '取消当前选择'
              },
              {
                  extend: 'copy',
                  text: '所选复制到剪切板',
                  className: 'btn btn-success fas fa-copy my-1',
                  exportOptions: {
                      columns: range(13)
                  }
              },
              {
                  extend: 'csv',
                  text: '所选输出到csv',
                  className: 'btn btn-success fas fa-file-csv my-1',
                  exportOptions: {
                      columns: range(13)
                  }
              },
              {
                  extend: 'csv',
                  text: '全部输出到csv',
                  className: 'btn btn-success fas fa-file-excel my-1',
                  exportOptions: {
                      columns: range(13),
                      selected: null
                  }
              },
              {
                  text: '添加单行',
                  className: 'btn btn-warning fas fa-edit my-1',
                  action: function (e, dt, node, config) {

                  },
                  attr: {
                      id: 'new'
                  }
              },
            {% if perms.BIS.bulk_update_SampleInfo %}
              {
                  text: '批量添加模板下载',
                  className: 'btn btn-success fas fa-download my-1',
                  action: function ( e, dt, node, config ) {

                  },
                  attr: {
                      id: 'downloadExcel'
                  }
              },
              {
                  text: '批量添加',
                  className: 'btn btn-warning fas fa-upload my-1',
                  action: function ( e, dt, node, config ) {

                  },
                  attr: {
                      id: 'upload'
                  }
              },
            {% endif %}
            {% if perms.BIS.bulk_delete_SampleInfo %}
              {
                  text: '批量删除',
                  className: 'btn btn-danger fas fa-trash-alt my-1',
                  action: function ( e, dt, node, config ) {

                  },
                  attr: {
                      id: 'bulkDel'
                  }
              },
            {% endif %}
          ],
          "ajax": url0 + "?format=datatables",
          "columns": [

              {
                  data: 'id',
                  width: "1%",
                  // 若想前端显示的不一样，则需要"render"函数
                  'render': function (data, type, full, meta) {
                      return meta.row + 1 + meta.settings._iDisplayStart;
                  }
              },
              {"data": "sample_id"},
              {"data": "sampler_id"},
              {"data": "raw_id"},
              {"data": "fridge"},
              {"data": "plate"},
              {"data": "well"},
              {"data": "sample_type"},
              {"data": "sample_date"},
              {"data": "send_date"},
              {"data": "memo"},
              {"data": "last_modify_time"},
              {"data": "create_time"},
              {
                  "data": null,
                  "defaultContent": '<button type="button" class="btn btn-info">更新</button>' + '&nbsp;&nbsp' +
                    '<button type="button" class="btn btn-danger">删除</button>'
              }
          ]
      });
      table.button(0).trigger();

      $('#table tbody').on('click', 'button', function () {
          let data = table.row($(this).parents('tr')).data();
          let class_name = $(this).attr('class');
          id0 = data['id'];
          console.info("click button, id:", id0)
          //alert(id);
          if (class_name === 'btn btn-info') {
              // EDIT button
              MyModelInit('更新', data);
              $("#myModal").modal();
          } else {
              // DELETE button
              // alert('delete '+id);
              // $('#modal_title').text('DELETE');
              $("#confirm").modal();
          }
      });

      $('#modelForm').on('submit', function (e) {
          e.preventDefault();
          // 递交前检查，一般是检测model的外键是否存在
          let data1 = $.ajax({
              url: url1, dataType: 'json', contentType: "application/json",
              type: "get", async: false, data: {sampler_id: $('#sampler_id').val()}
          }).responseJSON[0];
          if (data1 === undefined) {
              $('#myModalError').text('错误！！！华大编号不存在，请填写正确的华大编号。');
              return
          }

          let type = $('#type').val();
          let method = '';
          let url_ajax0 = url0;
          let send_data0 = $(this).serialize();
          if (type === 'new') {
              // new
              method = 'POST';
              // POST前检查，一般是检测model的关键字段值是否存在
              data0 = $.ajax({
                  url: url0, dataType: 'json', contentType: "application/json",
                  type: "get", async: false, data: {sample_id: $('#sample_id').val()}
              }).responseJSON[0];
              if (data0 !== undefined) {
                  $('#myModalError').text('错误！！！生物样本编号已存在，无法添加。如需更新该条目，请在对应行进行更新操作。');
                  return
              }
          } else {
              // edit
              url_ajax0 = url0 + id0 + '/';
              method = 'PUT';
          }
          
          $.ajax({
              url: url_ajax0,
              method: method,
              data: send_data0,
              headers: {'X-HTTP-Method-Override': 'PATCH'},
              success: function () {
                  let v_tmp = $('#sample_id').val();
                  if (type === 'new') {
                      databaseRecordAjaxPut(model0, "单项添加", "生物样本编号：" + v_tmp);
                      $('#myModalError').text('添加成功！！！生物样本编号：' + v_tmp);
                  } else {
                      databaseRecordAjaxPut(model0, "单项更新", "生物样本编号：" + v_tmp);
                      $('#myModalError').text('更新成功！！！生物样本编号：' + v_tmp);
                  }

                  setTimeout(
                      function () {
                          window.location.reload(true);
                      }, 3000
                  );
              },
              error: function (jqXHR, textStatus, errorThrown) {
                  $('#myModalError').text('出现错误！！！请联系管理员');
                  console.info(url_ajax0, method, send_data0);
                  console.log(jqXHR + ';' + textStatus + ';' + errorThrown);
              }
          });
      });

      $('#confirm').on('click', '#delete', function (e) {
          let res = delete_by_id_simple(url0, id0);
          if (res[0] === "success") {
              databaseRecordAjaxPut(model0, "单项删除", "id：" + res[1]);
              window.location.reload(true);
          } else {
              console.log(res[1]);
          }
      });

      $('#new').on('click', function (e) {
          MyModelInit('新增', {});
          $("#myModal").modal();
      });

      $('#upload').on('click', function (e) {
          $('#uploadOperator').val("");
          $('#uploadFile').val("");
          $('#uploadError').val("");
          $('#uploadUrl').val(model0);
          $("#uploadModal").modal();
      });

      $('#bulkDel').on('click', function (e) {
          $('#bulkDelUrl').val(model0);
          $("#bulkDelModal").modal();
      });

      $('#bulkDelModal').on('click', '#bulkDelete', function (e) {
          let arrayLen = table.rows(".selected").data().length;
          if (arrayLen > 0) {
              let delete_id_list = [];
              for (let i = 0; i < arrayLen; i++) {
                  let delete_id = table.rows(".selected").data()[i]['id'];
                  let res = delete_by_id_simple(url0, delete_id);
                  if (res[0] === "success") {
                      delete_id_list.push(res[1]);
                  }
              }
              databaseRecordAjaxPut(model0, "批量删除", "id_list：[" + delete_id_list + "]");
              window.location.reload(true);
          } else {
              $('#bulkDelError').text('没有行被选中，请先选中目标行。');
          }
      });

      $('.downloadExcel').on('click', function (e) {
          e.preventDefault();
          window.location.href = '/ADVANCE/download_excel/BIS_' + model0 + '/'
      });

      $('#myModalReset').on('click', function (e) {
          e.preventDefault();
          if ($('#modal_title').text() === '更新') {
              MyModelInit('更新', dataModelForm);
          } else {
              MyModelInit('新增', {});
          }
      });

      $("#modelForm input[type='text']").focus(function () {
          let key2 = $(this).attr('id');
          let values = $.ajax({
              url: "{% url 'ADVANCE:unique' %}", data: {model: model0, filed: key2},
              dataType: 'json', contentType: "application/json",
              method: "GET", async: false
          }).responseJSON.values;
          console.info("values:", values, "; key2:", key2);
          input_autocomplete(values, '#' + key2);
      });

      $("#sampler_id").blur(
          function () {
            $("#sample_id").val($("#sampler_id").val());
          }
      );

  });
</script>
{% endblock %}
